<template>
    <view>
        <canvas v-if="canvasId" class="my-canvas" :canvas-id='canvasId' :id="canvasId"
            :style="{'width': `${width}px`, 'height': `${height}px`}"/>
    </view>
</template>
<script>
    import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw';let draw = null;
	export default {
     props : {
		//合成海报参数为参数board
		board : {
		  type : Object,
		  default : {}
		},
        tiptext : {
		  type : String,
		  default : 'none'
		}
	   },
		data() {
        	return {
    			isReady : false,
    			width : 900,//海报宽度
    			height : 1280,//海报高度
        	}
        },
    	watch: {
          board: {
            handler: function(newVal, oldval) {
              if (JSON.stringify(newVal) === '{}' || !newVal) return;
              var self = this;
              var id = Math.random().toString(16).substr(2);
              var template = self.board;if(!template)return;
    	       self.isReady = true;
               self.width = template.width;
               self.height = template.height;
               self.createdPoster();
            },
            immediate: true,
            deep: true,
            async: true
          }
        },
    	computed: {
    		canvasId() {
    			var id = Math.random().toString(16).substr(2);
                return 'myCanvasId_'+id;
    		}
    	},
		methods: {
            // 生成分享图
            async createdPoster() {
                var template = this.board;
                if(template.background && template.background.indexOf('http')>-1){
                    var background_obj ={
						type: 'image',
						w: template.width,
						h: template.height,
                        src:template.background
					};
                }else{
                    var background_obj ={
						type: 'color',
						w: template.width,
						h: template.height,
                        color:template.background
					};
                }
                draw = new Draw({
                    width: template.width,
					height: template.height,
					canvasId:this.canvasId,
                    fileType: 'png', // 导出图片的类型, 默认png 可选jpg, png
					_this: this,
                    drawTipsText: this.tiptext,
					background:background_obj
                })
                let res = await draw.createdSharePoster(({ bgObj }) => {
                    let { width, height } = bgObj
                    // 绘制内容
                    var data_json = [];
                    for(var i in template.views){
                        var item = template.views[i]; 
                        var item_json = {};
                        switch(item.type){
                            case "image":
                            if(!item.css.mode)item.css.mode='widthFix';
                            item_json['type']=item.type;
                            item_json['x']=item.css.left;
                            item_json['y']=item.css.top;
                            item_json['w']=item.css.width;
                            item_json['h']=item.css.height;
                            item_json['src']=item.url;
                            item_json['mode']=item.css.mode;
                            if(item.css.windowAlign)item_json['windowAlign']=item.css.windowAlign;
                            if(item.css.r)item_json['r']=item.css.r;
                            if(item.css.borderWidth)item_json['borderWidth']=item.css.borderWidth;
                            if(item.css.borderColor)item_json['borderColor']=item.css.borderColor;
                            break;
                            case "qrcode":
                            if(!item.css.windowAlign)item.css.windowAlign='none';
                            if(!item.css.lv)item.css.lv=3;
                            
                            item_json['type']=item.type;
                            item_json['x']=item.css.left;
                            item_json['y']=item.css.top;
                            item_json['size']=item.css.size;
                            item_json['text']=item.css.text;
                            item_json['windowAlign']=item.css.windowAlign;
                            item_json['background']='#000000'; // 二维码背景色 默认#00000
                            item_json['foreground']='#ffffff'; // 二维码前景色 默认#fffff
                            item_json['pdground']='#ffffff'; // 二维码前景色 默认#fffff
                            item_json['lv']=item.css.lv; // 容错级别(一般不需要调它) 默认值是3
                            
                            if(item.image)item_json['image']=item.image;                            
                            // 二维码中间的图片 可选
                            /*image: {
                                src: '/static/logo.png', //网络路径(小程序中需要配置白名单)，本地路径, base64(使用base64格式绘制速度会稍微慢点，在IOS端显著。)
                                size: 30,  // 图片大小 默认 30
                                r: 0,  // 图片圆角 默认 0
                                borderWidth: 0, // 图片边框大小 默认0
                                borderColor: '#ffffff' // 图片边框颜色 默认无颜色
                            }*/                            
                            break;
                            case "rect":
                            item_json['type']=item.type;
                            item_json['x']=item.css.left;
                            item_json['y']=item.css.top;
                            item_json['w']=item.css.width;
                            item_json['h']=item.css.height;
                            if(item.css.color)item_json['color']=item.css.color;
                            break;
                            case "text":
                            item_json['type']=item.type;
                            item_json['text']=item.text;
                            item_json['x']=item.css.left;
                            item_json['y']=item.css.top;
                            var is_align =item.css.textAlign=='center'? 1:0;
                            if(item.css.maxLines>0){
                                var size = item.css.fontSize && item.css.fontSize>0?item.css.fontSize:16;
                                var textleng = item.text.length * size;
                                var totalwidth = item.css.width>0?item.css.width:template.width;
                                if(textleng>totalwidth)is_align=0;
                            }
                            if(is_align==1)item_json['x']=0;
                            if(item.css.width && is_align==0)item_json['w']=item.css.width;
                            item_json['line']={};
                            if(item.css.fontSize>16 && !item.css.lineHeight)item.css.lineHeight=item.css.fontSize+2;
                            if(item.css.fontSize)item_json['font']={size: item.css.fontSize};
                            if(item.css.color)item_json['color']=item.css.color;
                            if(item.css.maxLines && is_align==0)item_json['line']['num']=item.css.maxLines;
                            if(item.css.lineHeight)item_json['line']['height']=item.css.lineHeight;
                            if(item.css.textAlign=='center' && is_align==1)item_json['textAlign']=item.css.textAlign;
                            if(item.css.textAlign && item.css.textAlign!='center')item_json['textAlign']=item.css.textAlign;
                            if(item.css.textDecoration)item_json['line']['style']='lineThrough';
                            break;
                        }
                        data_json.push(item_json);
                    }//console.log('data_json',data_json);
                    return data_json;
                })
                if (!res.success){
                    console.log("合成海报出错了：", res);
                    //var title = res.message;if(res.message)uni.showToast({title,icon: "none",duration: 1500});
    				this.$emit('fail', res);return;
                }
                //console.log('res', res)
                var ev ={detail:{path:res.data}};
                this.$emit('success', ev);
            }
		}
	}
</script>
<style lang="scss" scoped>
    .my-canvas{
        position: fixed;
        top: -99999999999rpx;
        left: -99999999999rpx;
        z-index: -99999999999;
        opacity: 0;
    }
</style>